window.onload = function(){
    
    
        var App = new Vue({
            el:".fav_list",
            data:{
               list:[
                   {affair:'学习vue',no:1,done:true},
                   {affair:'学习前端',no:2,done:false},
                   {affair:'毕业答辩',no:3,done:false},
                   {affair:'进厂打工',no:4,done:false}
               ],
               doneToButton:false,
               inputvalue:"",

            },
           methods:{
               Add:function(){
                   if(!this.inputvalue)return
                   let listitem = {}
                   listitem={
                    affair:this.inputvalue,
                    no:this.list.length+1,
                    done:false,
                   }
                   if(this.doneToButton){   //完成在底部状态
                    console.log("底部状态")
                    function check(Litem){
                       return Litem.done == true
                    }                           
                    console.log(this.list.findIndex(check))
                    this.list.splice(this.list.findIndex(check)!==-1?this.list.findIndex(check):this.list.length,0,listitem)
                   }else{
                        this.list.push(listitem);
                        console.log("顺序状态")
                   }
                   console.log(this.list)
                   this.inputvalue = '';
               },
               click:function(){
                   this.inputvalue = "";
               },
               remove:function(index){
                   this.list.splice(index,1); 
               },
               clear:function(){
                this.list = [];
               },
               doing:function(index){
                this.list[index].done = !this.list[index].done
                this.ToButton("doing")
                // console.log(this.list[index])

               },
               ToButton:function(a){
                  if(a!=="doing")this.doneToButton=!this.doneToButton  
                   let arr = []
                   function sortArr(no) {
                    return function(a,b) {
                      return a[no] - b[no]
                    }
                }
                   if(this.doneToButton){                               //切换为做完放置底部
                    function checkAdult(list) {
                        return list.done;
                      }
                    arr = this.list.filter(checkAdult)
                    // console.log(this.list)
                    arr.forEach((i,index) => {
                        this.list.splice(this.list.indexOf(i),1)          
                    });
                    // arr.reverse()
                    console.log(arr)
                    arr.sort(sortArr('no'))                                 //完成的重新排序
                    this.list.sort(sortArr('no'))                           //未完成的重新排序
                    this.list.push(...arr)
                   }else{ 
                    console.log(this.list)                                 //取消切换为做完放置底部
                      this.list.sort(sortArr('no'))
                   }       
               },

               
           },
        }); 
    
}